<template>
    <div ref="printArea">
        <div class="bodyContent" id="printAreaDom">
            <div class="title">服务费用预算审批单</div>
            <div class="top-content">
              <span >申请科室：</span>
              <div style="width: 159px;"><span>日期：{{ printDate }}</span></div>
           </div>
           <div class="body-center">
              <div class="center-left">申请事由</div>
              <div class="center-right">
                  <span>{{ menuQuery.patentSubject }}
                 </span>
              </div>
              <div class="center-left">基本信息</div>
              <div class="center-right">
                  <div> 
                      <div>申请名称:{{ menuQuery.name }}</div>
                       <span style="margin-right: 40px;">申请人：{{ menuQuery.createUserName }}</span><span>所属部门：{{ menuQuery.deptName }}</span>
                  </div>
              </div>
              <div class="center-left">服务商报价</div>
              <div class="center-right">
                  <div> 
                      <div>{{ menuQuery.provider }}</div>
                       <span>报价：<span>{{ this.price}}</span>元</span>
                  </div>
              </div>
              <div class="center-left">经费列支渠道</div>
              <div class="center-right">
                  <textarea class="text" placeholder="请输入经费列支渠道"></textarea>
              </div>
              <div class="center-left">科研处 意见</div>
              <div class="center-right">
                  <div style="width: 50%;">{{ menuQuery.patLogList[0].auditContent }}</div>
                  <div style="margin-top: 10px;">
                      <div>审核人员：{{ menuQuery.patLogList[0].createUserName }}</div>
                      <div>审核时间：{{ menuQuery.patLogList[0].createTime}}</div>
                  </div>
              </div>
           </div>
           <div id="print" @click="printFun()">打印</div>
        </div>
    </div>
  </template>
  <script>
//   在main.js引入print.js
  export default {
      name: "detailMenu",
    
      data() {
      return {
         menuQuery:null,
         price:null,
         printDate:null,
         auditContent:'',
         createUserName:'',
         createTime:'',
         serviceItemDetail: null, //储存服务项目
      };
    },
    mounted() {
      var currentDate = new Date();
  
  // 获取年、月、日
  var year = currentDate.getFullYear();
  var month = currentDate.getMonth() + 1; // 月份是从 0 开始计数的，所以需要加1
  var day = currentDate.getDate();
  
  // 格式化成"xx年xx月xx日"形式
  var formattedDate = year + "年" + month + "月" + day + "日";
  this.printDate=formattedDate
  
       this.menuQuery=this.$route.query
       if (this.menuQuery.patLogList) {
        let lastList=this.menuQuery.patLogList.pop()
        this.auditContent=lastList.auditContent
        this.createUserName=lastList.createUserName
        this.createTime=lastList.createTime
       }
       if (this.menuQuery.serviceItemDetail) {
                this.serviceItemDetail = JSON.parse(
                  this.menuQuery.serviceItemDetail
                );
                if (this.serviceItemDetail) {
          this.serviceItemDetail.forEach((item, index) => {
                
            if(!item.price){
              this.price = ''
            } else {
              this.price = Number(item.price).toFixed(2) 
            }
                })
              }}     
    },
    methods:{
      printFun(){
          this.$print(this.$refs.printArea) 
  
          console.log(this.menuQuery)
      }
    }
  }
  </script>
  <style lang="scss" scoped>
  
  
  @media print {
    #print {
      display: none;
    }
    #printAreaDom{
      display: block !important;
      width: 90%;
      margin-top: 60px;
    }
    .body-center{
      width: 90%;
    }
    .center-left{
      background-color: #FAFCFF;
    }
    @page {
    size: A4;
    margin: 0;
    padding: 0;
    @top-center {
      content: none;
    }
    @bottom-center {
      content: none;
    }
  }
  
  }
    .bodyContent{
      width: 1240px;
      height: 794px;
      padding: 1px 20px;
      background: inherit;
      background-color: rgba(255, 255, 255, 1);
      box-sizing: border-box;
      border-width: 1px;
      border-style: solid;
      border-color: rgba(233, 233, 233, 1);
      border-radius: 0px;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      font-family: '微软雅黑';
      font-weight: 400;
      font-style: normal;
      text-align: left;
      line-height: 20px;
      position: relative;
      margin-left: 50px;
    }
    .title{
      font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
      font-weight: 700;
      font-style: normal;
      font-size: 20px;
      line-height: 90px;
      text-align: center;
    }
    .top-content{
       display: flex;
       justify-content: space-between;
       font-size: 14px;
    }
    .body-center{
      width: 100%;
      margin-top: 15px;
      box-sizing: border-box;
      border-width: 1px;
      border-style: solid;
      border-color: rgba(233, 233, 233, 1);
      border-radius: 0px;
      display: flex;
      flex-wrap: wrap;
    }
    .center-left{
      box-sizing: border-box;
      width: 15%;
      height: 100px;
      border-width: 1px;
      border-style: solid;
      border-color: rgba(233, 233, 233, 1);
      font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
      font-weight: 700;
      font-style: normal;
      color: #666666;
      font-size: 14px;
      line-height: 100px;
      text-align: center;
      background: #FAFCFF;
    }
    .center-right{
      box-sizing: border-box;
      width: 85%;
      height: 100px;
      border-width: 1px;
      border-style: solid;
      border-color: rgba(233, 233, 233, 1);
      padding: 14px;
      display: flex;
      align-items: center;
      font-size: 13px;
    }
    .text{
      width: 1000px;
      height: 76px;
      font-family: 'Arial Normal', 'Arial';
      font-weight: 400;
      font-style: normal;
      font-size: 13px;
      color: rgb(153, 153, 153);
    }
    #print{
      width: 110px;
      height: 35px;
      font-size: 13px;
      text-align: center;
      line-height: 35px;
      border-width: 1px;
      border-style: solid;
      border-color: rgba(233, 233, 233, 1);
      margin: 60px auto;
    }
  </style>
  